<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝猫 - 现代购物体验</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#007AFF', // 大疆蓝
                        secondary: '#00C2FF',
                        dark: '#111827',
                        'dark-light': '#1F2937',
                        'gray-custom': '#6B7280'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-all hover:shadow-md;
            }
            .btn-secondary {
                @apply bg-secondary text-white px-4 py-2 rounded-md hover:bg-secondary/90 transition-all hover:shadow-md;
            }
            .category-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .slide-in {
                animation: slideIn 0.6s ease-out forwards;
            }
            @keyframes slideIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-white text-dark font-sans">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-20">
                <!-- Logo -->
                <a href="#" class="flex items-center space-x-2">
                    <span class="logo text-2xl font-bold text-blue-600">蓝猫</span>
                </a>
                
                <!-- 导航链接 - 桌面版 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="font-medium hover:text-primary transition-colors">首页</a>
                    <a href="new_product.html" class="font-medium hover:text-primary transition-colors">热卖商品</a>
                    <a href="new_product1.html" class="font-medium hover:text-primary transition-colors">热卖商品1</a>
                    <a href="new_product2.html" class="font-medium hover:text-primary transition-colors">热卖商品2</a>
                    <a id="adminCreateProduct" href="add-product.html" class="font-medium hover:text-primary transition-colors hidden">创建商品</a>                    
                    <a href="about-ours.html" class="font-medium hover:text-primary transition-colors">关于我们</a>
                </nav>
                
                <!-- 搜索框 - 桌面版 -->
                <div class="hidden md:flex items-center relative flex-1 max-w-md mx-8 group">
                    <input type="text" id="searchInput" placeholder="搜索商品..." class="w-full py-2 px-4 pr-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all group-hover:border-primary/30">
                    <button id="searchBtn" class="absolute right-3 text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
                
                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">  
                    <button id="cartBtn" class="relative p-2 hover:text-primary transition-colors">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        <span id="cartCount" class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center transition-all">0</span>
                    </button>

                    <div id="auth-links" class="flex items-center space-x-4">
                        <a href="login.html" class="relative text-sm text-gray-500 hover:text-primary transition-colors">登陆</a>
                        <a href="register.html" class="relative text-sm text-gray-500 hover:text-primary transition-colors">注册</a>
                    </div>                    
                                        
                    <div id="user-info" class="hidden items-center space-x-2">
                        <span class="relative text-sm text-gray-500 hover:text-primary transition-colors"></span>
                        <button id="logoutBtn" class="relative text-sm text-gray-500 hover:text-primary transition-colors">退出</button>
                    </div>
                
                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>                    
                </div>
            </div>
                       
            <!-- 移动端搜索框 -->
            <div class="md:hidden pb-4">
                <div class="relative">
                    <input type="text" id="mobileSearchInput" placeholder="搜索商品..." class="w-full py-2 px-4 pr-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                    <button id="mobileSearchBtn" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="index.html" class="block py-2 font-medium hover:text-primary transition-colors">首页</a>
                <!-- 移动端分类菜单 -->
                <div class="pt-2 border-t border-gray-100">
                    <p class="font-medium mb-2">商品分类</p>
                    <div class="grid grid-cols-2 gap-2">
                        <button class="category-btn py-2 px-3 rounded-md border border-gray-200 hover:border-primary hover:text-primary transition-colors" data-category="all">全部商品</button>
                        <button class="category-btn py-2 px-3 rounded-md border border-gray-200 hover:border-primary hover:text-primary transition-colors" data-category="电子产品">电子产品</button>
                        <button class="category-btn py-2 px-3 rounded-md border border-gray-200 hover:border-primary hover:text-primary transition-colors" data-category="服装鞋帽">服装鞋帽</button>
                        <button class="category-btn py-2 px-3 rounded-md border border-gray-200 hover:border-primary hover:text-primary transition-colors" data-category="家居用品">家居用品</button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="pt-16">
        <!-- 英雄区 -->
        <section class="relative bg-gradient-to-r from-primary/90 to-primary text-white overflow-hidden">
            <div class="container mx-auto px-4 py-16 md:py-24">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-8 md:mb-0 relative z-10 slide-in">
                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight">
                            仿真平台
                        </h1>
                        <p class="text-lg md:text-xl mb-8 text-white/90 max-w-lg text-balance">
                            无人机智能体探索未知空间及自主路径规划
                        </p>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button class="btn-secondary hover:shadow-lg transform hover:-translate-y-0.5 transition-all">
                                立即选购
                            </button>
                            <button id="learnMoreBtn" class="bg-white text-primary px-4 py-2 rounded-md hover:bg-gray-100 transition-all hover:shadow-md" onclick="window.location.href='product-intro.html'">
                                了解更多
                            </button>
                        </div>
                        
                        <!-- 信任标识 -->
                        <div class="mt-10 flex flex-wrap items-center gap-x-6 gap-y-3">
                            <div class="flex items-center text-white/80">
                                <i class="fa fa-truck mr-2"></i>
                                <span class="text-sm">次日送达</span>
                            </div>
                            <div class="flex items-center text-white/80">
                                <i class="fa fa-shield mr-2"></i>
                                <span class="text-sm">正品保障</span>
                            </div>
                            <div class="flex items-center text-white/80">
                                <i class="fa fa-refresh mr-2"></i>
                                <span class="text-sm">7天无理由</span>
                            </div>
                        </div>
                    </div>
                    <div class="lg:w-1/2 w-full animate-fade-in slide-in-from-right">
                        <div class="relative">
                            <div class="relative rounded-xl overflow-hidden shadow-2xl transform hover:scale-[1.02] transition-transform duration-700">
                                <img src="https://picsum.photos/600/300" alt="无人机智能探索系统" class="w-full h-auto object-cover">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/60 to-transparent opacity-60"></div>
                            </div>
                            <div class="absolute -bottom-6 -right-6 w-32 h-32 border border-primary/30 rounded-lg -rotate-12"></div>
                            <div class="absolute -top-6 -left-6 w-24 h-24 border border-secondary/30 rounded-lg rotate-12"></div>                            
                        </div>
                    </div>                   -->
                </div>
            </div>
        </section>

        <!-- 分类导航 - 桌面版 -->
        <section class="hidden md:block bg-white shadow-sm sticky top-16 z-40">
            <div class="container mx-auto px-4">
                <div class="flex overflow-x-auto scrollbar-hide py-3 space-x-2">
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors category-active" data-category="all">
                        全部商品
                    </button>
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors" data-category="电子产品">
                        电子产品
                    </button>
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors" data-category="服装鞋帽">
                        服装鞋帽
                    </button>
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors" data-category="家居用品">
                        家居用品
                    </button>
                </div>
            </div>
        </section>

        <!-- 商品展示区 -->
        <section class="py-8 bg-gray-50">
            <div class="container mx-auto px-4">
                <!-- 搜索结果提示 -->
                <div id="searchResultHint" class="mb-6 hidden">
                    <p class="text-gray-600"><span id="searchKeyword"></span> 的搜索结果：<span id="searchCount"></span> 件商品</p>
                </div>
                
                <!-- 分类结果提示 -->
                <div id="categoryResultHint" class="mb-6">
                    <p class="text-gray-600"><span id="categoryName">全部商品</span>：<span id="categoryCount"></span> 件商品</p>
                </div>
                
                <div id="products-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                    <!-- 商品卡片将通过JavaScript动态加载 -->
                </div>

                <!-- 加载状态 -->
                <div id="loadingIndicator" class="mt-8 text-center hidden">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                    <p class="mt-2 text-gray-500">加载中...</p>
                </div>

                <!-- 加载更多按钮 -->
                <div class="mt-8 text-center">
                    <button id="loadMoreBtn" class="btn-primary group">
                        加载更多
                    </button>
                </div>
                
                <!-- 没有更多商品提示 -->
                <div id="noMoreProducts" class="mt-8 text-center hidden">
                    <p class="text-gray-500">已经到底啦</p>
                </div>
                
                <!-- 没有找到商品提示 -->
                <div id="noProductsFound" class="mt-16 text-center hidden">
                    <i class="fa fa-search text-5xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500">没有找到相关商品</p>
                    <button id="resetSearchBtn" class="mt-4 btn-primary">
                        查看全部商品
                    </button>
                </div>
            </div>
        </section>      
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-12 pb-8 mt-8 lg:mt-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <span class="font-bold text-xl">蓝猫</span>
                    </div>
                    <p class="text-gray-400 mb-4">
                        提供优质商品和极简购物体验
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="font-bold text-lg mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">热门商品</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-bold text-lg mb-4">客户服务</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">购物指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">配送信息</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-bold text-lg mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">北京市朝阳区某某街道123号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-3"></i>
                            <span class="text-gray-400">400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope text-primary mr-3"></i>
                            <span class="text-gray-400">service@example.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-6 text-center text-gray-500 text-sm">
                <p>&copy; 2023 蓝猫购物. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 购物车侧边栏 -->
    <div id="cartSidebar" class="fixed top-0 right-0 h-full w-full sm:w-96 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300">
        <div class="h-full flex flex-col">
            <div class="p-6 border-b">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold">购物车</h3>
                    <button id="closeCartBtn" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            
            <div id="cartItems" class="flex-1 overflow-y-auto p-6 space-y-4 scrollbar-hide">
                <!-- 购物车为空时显示 -->
                <div id="emptyCart" class="h-full flex flex-col items-center justify-center text-gray-500">
                    <i class="fa fa-shopping-cart text-5xl mb-4"></i>
                    <p>您的购物车是空的</p>
                    <button id="startShoppingBtn" class="mt-4 btn-primary hover:shadow-md transition-all">
                        开始购物
                    </button>
                </div>
                
                <!-- 购物车商品将通过JavaScript动态加载 -->
            </div>
            
            <div class="p-6 border-t">
                <div class="flex justify-between mb-4">
                    <span class="font-medium">总计</span>
                    <span id="cartTotal" class="font-bold text-xl">¥0.00</span>
                </div>
                <button id="checkoutBtn" class="btn-secondary w-full hover:shadow-md transition-all" disabled>
                    结算
                </button>
            </div>
        </div>
    </div>

    <!-- 遮罩层 -->
    <div id="overlay" class="fixed inset-0 bg-black/50 opacity-0 transition-opacity duration-300 z-40 hidden"></div>

    <!-- 通知提示 -->
    <div id="toast" class="fixed bottom-6 right-6 bg-dark text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
        <i class="fa fa-check-circle text-secondary mr-2"></i>
        <span id="toastMessage"></span>
    </div>
    
    <!-- 商品快速查看模态框 -->
    <div id="quickViewModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-lg shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-auto m-4 flex flex-col md:flex-row">
            <button id="closeQuickViewBtn" class="absolute top-4 right-4 z-10 bg-white/80 p-2 rounded-full text-gray-600 hover:text-red-500 transition-colors">
                <i class="fa fa-times"></i>
            </button>
            <div id="quickViewImageContainer" class="md:w-1/2 p-6">
                <img id="quickViewImage" src="" alt="商品图片" class="w-full h-auto object-cover rounded-lg">
            </div>
            <div id="quickViewDetails" class="md:w-1/2 p-6 flex flex-col">
                <h3 id="quickViewTitle" class="text-2xl font-bold mb-2"></h3>
                <div id="quickViewCategory" class="text-gray-500 mb-4"></div>
                <div class="flex items-center mb-4">
                    <div id="quickViewRating" class="text-yellow-400 text-sm mr-2"></div>
                    <span id="quickViewReviews" class="text-sm text-gray-500"></span>
                </div>
                <div id="quickViewPrice" class="text-2xl font-bold text-primary mb-6"></div>
                <div id="quickViewDescription" class="text-gray-600 mb-6 flex-1"></div>
                <div class="flex items-center mb-6">
                    <button id="quickViewDecreaseQty" class="p-2 border rounded-l-md hover:bg-gray-100 transition-colors">
                        <i class="fa fa-minus"></i>
                    </button>
                    <input type="number" id="quickViewQty" min="1" value="1" class="w-16 text-center border-y py-2">
                    <button id="quickViewIncreaseQty" class="p-2 border rounded-r-md hover:bg-gray-100 transition-colors">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
                <button id="quickViewAddToCart" class="btn-primary w-full py-3 text-lg">
                    加入购物车
                </button>
                <a id="quickViewProductLink" href="#" class="mt-3 text-center text-primary hover:underline">查看完整商品详情</a>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>